<template>
  <div class="screen-header">
    <div class="screen-header-title">高新区智慧建交管理平台</div>
    <div class="screen-header-left">

      <div class="time-wrap">
       <div class="time-wrap-dv1">
         <i class="el-icon-time"></i>
         <span>{{timeStr}}</span>
       </div>
        <div class="time-wrap-dv2">{{dateStr}}</div>
      </div>
      <div class="weather-wrap">
        <weather />
      </div>

    </div>
  </div>
</template>

<script>
import weather from '../weather'
import date from '@/helper/date'

export default {
  name: 'screen-header',
  components: {
    weather
  },
  data() {
    return {
      dateStr: '',
      timeStr: ''
    }
  },
  methods: {
    initTimer() {
      if(this.timer != null) {
        window.clearInterval(this.timer)
      }
      this.dateStr = date(new Date(), 'yyyy-MM-dd ')
      this.timer = setInterval(() => {
        const str = date(new Date(), 'hh:mm:ss')
        this.timeStr = str
      }, 1000)
    }
  },
  beforeDestroy() {
    if(this.timer) {
      window.clearInterval(this.timer)
    }
  },
  mounted() {
    this.initTimer()
  }
}
</script>

<style lang="scss" scoped>
  .screen-header {
    position: absolute;
    top: 0;
    height: 14%;
    left: 0;
    right: 0;
    background-image: url("~@/assets/screen/header.png");
    background-size: 100% 100%;
    z-index: 2;

    &-title {
      font-size: 36px;
      letter-spacing: 4px;
      color: #C6FFF6;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 13px;
    }

    &-left {
      position: absolute;
      top: 40px;
      left: 40px;
      display: flex;
    }

    .time-wrap {
      color: #78CCFF;
      & > i {
        margin-right: 10px;
      }

      &-dv1 {
        font-size: 30px;
        letter-spacing: 3px;
      }

      &-dv2 {
        color: #FFF;
        font-size: 20px;
        padding-left: 33px;
      }
    }

    .weather-wrap {
      height: 54px;
      margin-left: 30px;
    }
  }
</style>
